<template>
  <dialog-button icon="el-icon-edit">
    <template #title>双击 编辑/保存 源码</template>
    <code-editor v-model="model_value" language="json"></code-editor>
  </dialog-button>
</template>

<script lang="ts" setup>
  import DialogButton from '../other/DialogButton.vue';
  import CodeEditor from './CodeEditor.vue';
  import { computed } from 'vue';

  const props = defineProps<{
    modelValue: unknown;
  }>();

  const emit = defineEmits(['update:modelValue']);

  const model_value = computed({
    get(): string {
      return JSON.stringify(props.modelValue, null, 2);
    },
    set(v: string) {
      emit('update:modelValue', JSON.parse(v));
    }
  });
</script>

<style scoped></style>
